<template>
    <div class="courses-container">
        <el-card style="max-width: 1000vh">
            <template #header >
                <span style="font-size: 22px;margin-left: 20px;font-weight: 700">我的授课</span>
                <!-- 学期选择按钮 -->
                <el-button type="primary" style="margin-left: 680px" @click="selectTerm('第一学期')" plain>{{ currentTermButtonText.first }}</el-button>
                <el-button type="success" style="width: 90px" @click="selectTerm('第二学期')" plain>{{ currentTermButtonText.second }}</el-button>

            </template>
            <div v-if="courses.length === 0" class="no-courses-message">
                您还没有任何授课课程!
            </div>
            <a v-for="(course, index) in courses" :key="course.id" @click="navigateToCourse(course.id)" class="course-card">
                <el-card  shadow="hover">
                    <div class="card-content">
                        <image-preview :src="course.imgs" class="course-image"/>
                        <div class="course-details">
                            <h2 class="course-title">{{ course.name }}</h2>
                            <p class="course-description">{{ course.coursedesc }}</p>
                            <div class="course-meta">
<!--                                <span class="course-date"><el-icon><Timer /></el-icon>{{ course.starttime }} - {{ course.endtime }}</span>-->
<!--                                hours学时-->
                                <span class="course-hours"><el-icon><Clock /></el-icon>学时:{{ course.hours }}</span>
<!--                                credits学分-->
                                <span class="course-credits"><el-icon><Star /></el-icon>学分:{{ course.credits }}</span>
                                <span class="course-teacher"><el-icon><Avatar /></el-icon>选课人数:{{ course.nownum }}</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </a>
        </el-card>
    </div>
</template>

<script setup >
    import { onMounted, ref,computed } from 'vue';
    import { RouterLink,useRouter } from 'vue-router';
    import { listMyTeacherCourse } from '@/api/MyTeacherCourse/MyTeacherCourse';

    const courses = ref([]);

    //计算是否是当前学期
    const currentTermButtonText = computed(() => {
        const now = new Date();
        const month = now.getMonth() + 1; // getMonth() 返回 0-11，所以需要加1
        return {
            first: month >= 2 && month <= 6 ? '本学期' : '第一学期',
            second: month >= 7 && month <= 11 ? '本学期' : '第二学期'
        };
    });

    let currentTerm = '第二学期'; // 初始化为第一学期
    const fetchData = async () => {
        try {
            const userId = localStorage.getItem('userId');
            const response = await listMyTeacherCourse({
                userId,
                pageNum: 1,
                pageSize: 1000,
            });

            if (response && response.code === 200 && Array.isArray(response.rows)) {
                courses.value = filterCoursesByTerm(response.rows);
            } else {
                console.error('Invalid response data:', response);
                courses.value = [];
            }
        } catch (error) {
            console.error('Failed to fetch data:', error);
        }
    };


    // 在前端进行课程数据的筛选
    const filterCoursesByTerm = (allCourses) => {
        if (Array.isArray(allCourses)) {
            return allCourses.filter(course => course.term === currentTerm);
        }
        return []; // 如果 allCourses 不是一个数组，返回空数组
    };


    onMounted(() => {
        fetchData();
    });

    const selectTerm = (term) => {
        currentTerm = term;
        fetchData(); // 重新获取数据并按新学期筛选
    };
    // 初始化 router 实例
    const router = useRouter();
    /** 页面跳转*/
    function navigateToCourse(id) {
        router.push(`/MyTeacherCourses/${id}`);
    }

</script>


<style scoped>
    .courses-container {
        max-width: 80%; /* 调整宽度 */
        margin: auto;
        padding: 20px;
    }
    .no-courses-message {
        text-align: center;
        font-size: 1.2em;
        color: #888;
        margin-top: 50px;
    }

    .title {
        text-align: center;
        margin-bottom: 40px;
    }

    .course-card {
        display: block; /* 修改为块级元素 */
        width: 100%; /* 占据全部宽度 */
        text-decoration: none;
        color: inherit;
    }

    .card-content {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 8px;
    }

    .course-image {
        width: 400px;
        height: 35vh;
        object-fit: cover;
        border-radius: 6px;
        margin-right: 20px;
    }

    .course-details {
        flex-grow: 1;
        max-width: 600px;
    }

    .course-title {
        font-size: 1.4em;
        font-weight: bold; /* 加粗标题 */
        margin-bottom: 10px;
    }

    .course-description {
        line-height: 1.6;
        margin-bottom: 10px;

    }

    .course-meta {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }


    .course-date,
    .course-teacher {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 0.7em;
        color: #fff;
    }

    .course-date {
        background-color: #88c8f5;
    }

    .course-teacher {
        /*background-color: #e1be5b;*/
        background-color: #d3a184;
    }
    .course-hours{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 0.7em;
        color: #fff;
        background-color: #c07761;

    }
    .course-credits{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 0.7em;
        color: #fff;
        background-color: #88c8f5;
    }
</style>